﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>增减购物车商品信息</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <style type="text/css">
        * {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <tr>
            <th><input type="checkbox" onclick="toggleCheckboxes(this)" />全选</th>
            <th>商品信息</th>
            <th>宜美惠价</th>
            <th>数量</th>
            <th>操作</th>
        </tr>

        <tr class="tr_0">
            <td>
                <input name="" type="checkbox" value="" />
            </td>
            <td>
                <img src="images/sang.gif" class="products" /><a href="#">天堂雨伞</a>
            </td>
            <td>￥32.9元</td>
            <td>
                <img src="images/subtraction.gif" width="20" height="20" onclick="decreaseQuantity(this)" />
                <input type="text" class="quantity" value="1" />
                <img src="images/add.gif" width="20" height="20" onclick="increaseQuantity(this)" />
            </td>
            <td>
                <a href="#" class="del" onclick="deleteRow(this)">删除</a>
            </td>
        </tr>
        <tr>
            <td>
                <input name="" type="checkbox" value="" />
            </td>
            <td>
                <img src="images/iphone.gif" class="products" /><a href="#">苹果手机iphone5</a
          >
        </td>
        <td>￥3339元</td>
        <td>
          <img src="images/subtraction.gif" width="20" height="20" onclick="decreaseQuantity(this)" />
          <input type="text" class="quantity" value="1" />
          <img src="images/add.gif" width="20" height="20" onclick="increaseQuantity(this)" />
        </td>
        <td>
          <a href="#" class="del" onclick="deleteRow(this)">删除</a>
            </td>
        </tr>
    </table>

    <a href="#" class="add" onclick="addRow()">添加</a>

    <script>
        function addRow() {
            var table = document.querySelector("table");
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount); // 添加到哪一行
    
            // 创建表格
            var checkboxCell = row.insertCell(0);
            var productCell = row.insertCell(1);
            var priceCell = row.insertCell(2);
            var quantityCell = row.insertCell(3);
            var actionCell = row.insertCell(4);
    
            // 设置表格内容
            checkboxCell.innerHTML = '<input name="" type="checkbox" value="" />';
            productCell.innerHTML =
                '<img src="images/computer.jpg" class="products" /><a href="#">联想笔记本电脑</a>';
            priceCell.innerHTML = "￥4532元";
            quantityCell.innerHTML =
                '<img src="images/subtraction.gif" width="20" height="20" onclick="decreaseQuantity(this)" />' +
                '<input type="text" class="quantity" value="1" />' +
                '<img src="images/add.gif" width="20" height="20" onclick="increaseQuantity(this)" />';
            actionCell.innerHTML = '<a href="#" class="del" onclick="deleteRow(this)">删除</a>';
        }
    
        // 删除行方法
        function deleteRow(element) {
            var row = element.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }
    
        function toggleCheckboxes(checkbox) {
            var checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(function(cb) {
                cb.checked = checkbox.checked;
            });
        }
    
        // 增加数量方法
        function increaseQuantity(element) {
            var quantityInput = element.parentNode.querySelector(".quantity");
            quantityInput.value = parseInt(quantityInput.value) + 1;
        }
    
        // 减少数量方法
        function decreaseQuantity(element) {
            var quantityInput = element.parentNode.querySelector(".quantity");
            var quantityValue = parseInt(quantityInput.value);
            if (quantityValue > 0) {
                quantityInput.value = quantityValue - 1;
            }
        }
    </script>
    
</body>

</html>